{% extends 'base.html' %}

{% block  css-page %}

    <link href="/static/datatable/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="/static/datatable/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">


{% endblock %}




{% block page-content %}
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">服务器管理</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">

                    <div>
                        <a  href="{% url 'server_add' %}"><button class="btn btn-primary " type="button">添加服务器</button></a>

                        <a  href="{% url 'outputdata' %}"><button class="btn btn-danger " type="button">导出列表</button></a>

                      {% if  listencelery == 0%}
                            <button class="btn btn-success " type="button">监控进程正在运行!!!</button>
                        {%else %}
                            <button class="btn btn-danger " type="button">监控进程未运行!!!</button>
                        {%endif%}

                    </div>


                </div>

                <div class="col-lg-12" style="margin-top:10px;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            服务器信息列表
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <th>主机名</th>
                                            <th>IP地址</th>
                                            <th>内网IP</th>
                                            <th>虚拟IP</th>
                                            <th>区域</th>
                                            <th>机房</th>
                                            <th>部门</th>
                                            <th>业务</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {%for s in Serverlist%}
                                        <tr class="odd gradeX">
                                            <td>{{s.hostname}}</td>
                                            <td>{{s.externalip}}</td>
                                            <td>{{s.internalip}}</td>
                                            <td>{{s.virtip}}</td>
                                            <td>{{s.idc.idczone}}</td>
                                            <td class="center">{{s.idc}}</td>
                                            <td class="center">{{s.dept}}</td>
                                            <td class="center">{{s.businessname}}</td>
                                            {%for k,v in ServerStatus.items%}
                                                {%if  k == s.status%}
                                                    {%if s.status == 1%}
                                                        <td class="center "><span class="running_510">{{v}}</span></td>
                                                    {%endif%}
                                                    {%if s.status == 2%}
                                                        <td class="center "><span class="down_610">{{v}}</span></td>

                                                    {%endif%}

                                                    {%if s.status == 3%}
                                                        <td class="center "><span class="unknow_710">{{v}}</span></td>

                                                    {%endif%}
                                                {%endif%}
                                            {%endfor%}
                                            <td class="center">
                                                <a class="btn btn-xs btn-primary" href="/server/server_detail/{{s.id}}">详情</a>
                                                <a class="btn btn-xs btn-info" href="/server/edit/{{s.id}}">编辑</a>
                                                 <button class="btn btn-xs btn-danger" data-toggle="modal"  onclick="clickurl('{{s.id}}')"  data-target="#myModal" >删除</button>
                                            </td>
                                        </tr>
                                    {%endfor%}

                                        
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->


                             <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                   aria-labelledby="myModalLabel" aria-hidden="true">
                                   <div class="modal-dialog">
                                      <div class="modal-content">
                                         <div class="modal-header">
                                            <button type="button" class="close"
                                               data-dismiss="modal" aria-hidden="true">
                                                  &times;
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">
                                               删除提醒
                                            </h4>
                                         </div>
                                         <div class="modal-body">
                                            系统提示:您是否确认删除这条记录!!!!
                                         </div>
                                         <div class="modal-footer">
                                            <button type="button" class="btn btn-default"
                                               data-dismiss="modal">关闭
                                            </button>
                                            <a class="btn btn-primary" id="postdel" > 删除</a>
                                         </div>
                                      </div>
                                   </div>
                             </div>


                             <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"   aria-labelledby="myModalLabel">
                              <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">系统提示</h4>
                                  </div>
                                  <div class="modal-body">
                                         <p id="getdata">ddddddd</p>
                                  </div>
                                <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <a class="btn btn-primary" href="/server/list/">确定</a>
                                    </div>
                                 </div>
                              </div>
                             </div>




                             <script>
                               function clickurl(url){
                                    $("#postdel").click(function() {
                                        $.get("/server/del/"+url,
                                                 function (data) {
                                                    $('#myModal').modal('hide')
                                                    $("#getdata").html(data);
                                                    $('#myModal2').modal('show');
                                                });
                                    });
                                }
                          </script>



                        </div>
                        <!-- /.panel-body -->

                    </div>
                    <!-- /.panel -->
                </div>
            </div>
            <!-- /.row -->

    {% endblock %}


    {% block  script-page %}

            <!-- Custom Theme JavaScript -->

            <!-- Page-Level Demo Scripts - Tables - Use for reference -->
            <script>
                 $(document).ready(function() {
                 $('#dataTables-example').DataTable({
                        responsive: true,
                        "oLanguage":{
                                "sZeroRecords":"查询不到任何相关数据",
                                "sSearch": "搜索:",
                                "sLengthMenu": "每页显示 _MENU_ 条记录",
                                "oPaginate": {
                                          "sFirst":    "第一页",
                                          "sPrevious": " 上一页 ",
                                          "sNext":     " 下一页 ",
                                          "sLast":     " 最后一页 "
                                      },
                                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                        }
                });
            });
            </script>

    {% endblock %}

